
import React, { useState, useTransition, FC } from 'react';

import './use_transition.css'
export const TransitionComponent: FC = () => {
    const [activeTab, setActiveTab] = useState('');


    const [isPending, startTransition] = useTransition();

    const onHandleChange = (tab: string) => {
        // 把某次更新标记为低优先级；从而防止页面卡顿的情况，不阻塞ui对用户的相应；(里面写入同步代码 不要写异步代码)
        startTransition(() => {
            setActiveTab(tab);
        });

        // 不要写异步的
        // startTransition(() => {
        //     setTimeout(() => {
        //         setActiveTab(tab);
        //     }, 0);
        // });

    }
    // 内容渲染
    const RenderTabs = () => {
        if (isPending) return <h2>loading...</h2>
        switch (activeTab) {
            case 'home':
                return <HomeFun></HomeFun>;
            case 'movie':
                return <MovieFun></MovieFun>;
            case 'my':
                return <MyFun></MyFun>;
            default:
                return  <HomeFun></HomeFun>;
        }
    }

    return <>
        <BtnFun isActive={activeTab == 'home'} onClick={() => {
            console.log("嗲及")
            onHandleChange('home')
        }}>首页</BtnFun>
        <BtnFun isActive={activeTab == 'movie'} onClick={() => {
            onHandleChange('movie')
        }}>电影</BtnFun>
        <BtnFun isActive={activeTab == 'my'} onClick={() => {
            onHandleChange('my')
        }}>我的</BtnFun>

        <div>
            {RenderTabs()}
        </div>

    </>
}



// 一个 按钮组件
type TabType = React.PropsWithChildren & { isActive: boolean, onClick: () => void };
export const BtnFun: FC<TabType> = (props) => {
    const onButtonClick = () => {
        props.onClick();
    }

    return <>
        <button onClick={onButtonClick} className={props.isActive ? 'li_wrap activeItem' : 'li_wrap'}>{props.children}</button>
    </>
}


export const HomeFun: FC = () => {
    return <>
        首页
    </>
}

export const MovieFun: FC = () => {
    return <>
        电影
        {Array(99999).fill("刘凯欣").map((item, index) => {
            return (
                <li key={index}>{item}{index + 1}</li>
            )
        })}
    </>
}

export const MyFun: FC = () => {
    return <>
        我的
    </>
}